import React, { useRouteError } from 'react-router-dom';

// root错误，react-router-dom提供的错误边界 放在上层，子组件抛出的错误
function RootErrorBoundary() {
    const error = useRouteError() as Error;
    return (
        <div className='flex flex-col items-center mt-10 '>
            <h1>哦，出了严重的问题 😩</h1>
            <div>
                <pre>
                    message:
                    {error.message}
                </pre>
                <pre>
                    error:
                    {JSON.stringify(error)}
                </pre>
            </div>

            <button
                type='button'
                onClick={() => {
                    window.location.href = '/';
                }}
            >
                重新加载
            </button>
        </div>
    );
}

export default RootErrorBoundary;
